`<template>
<!--  <div :style="{'height': props.height,'width': props.width}" class="ace">
    <el-form label-width="50px">
      <el-form-item label="语言">
        <el-select v-model="langType" @change="handleLang" style="width:120px;">
          <el-option v-for="(item) in langArray" :key="item.name" :label="item.name" :value="item.path">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div id="editor" ref="ace"></div>
  </div>-->
  <el-button @click="handleFind" >查找</el-button>
  <div id="editor" ref="ace"></div>

</template>

<script>

import ace from "ace-builds";
// import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入
import 'ace-builds/src-noconflict/ext-language_tools'
// import 'ace-builds/src-noconflict/theme-monokai' // 默认设置的主题
// import 'ace-builds/src-min-noconflict/theme-one_dark'
import 'ace-builds/src-min-noconflict/theme-chrome'
import 'ace-builds/src-min-noconflict/ext-searchbox'
import 'ace-builds/src-min-noconflict/mode-json5'

//自动提示规则
import 'ace-builds/src-noconflict/snippets/javascript'
import 'ace-builds/src-noconflict/snippets/sql'
import 'ace-builds/src-noconflict/snippets/json'
import 'ace-builds/src-noconflict/snippets/java'
import 'ace-builds/src-noconflict/snippets/text'

export default {
  name: 'AceEditor',
  components: {

  },

  mounted(){
    // ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/')
    this.editor = ace.edit(this.$refs.ace, {
      maxLines: 34,
      minLines: 34,
      fontSize: 24,
      theme: 'ace/theme/chrome',
      mode: 'ace/mode/json5',
      tabSize: 4,
      readOnly: false,
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true,
      enableSnippets: true,
    })

    var json = { a: 5, b:6, name: 'shenyl' }
    this.editor.setValue(  JSON.stringify(json) )
  },
  data() {
    return {
      editor: null,
    }
  },
  methods: {
    //aceeditor查找功能
    handleFind( ){
      this.editor.execCommand('find')
    },

  },
}

</script>

<style scoped>

</style>
